<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Dashboard</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/vendor/css/fontastic.css">
    <link rel="stylesheet" href="/static/vendor/css/style.default.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/vendor/css/custom.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" href="/static/vendor/img/favicon.ico">
    <script src="/static/vendor/js/render.js"></script>
</head>
<body>
<nav class="side-navbar">
    <div class="side-navbar-wrapper">
        <div class="sidenav-header d-flex align-items-center justify-content-center">
            <div class="sidenav-header-inner text-center"><img
                        src="https://file.yaop.ink/d4810653bff615a839283c91039f4589.png" alt="person"
                        class="img-fluid rounded-circle">
                <h2 class="h5">TungYao</h2><span>Web Architect</span>
            </div>
            <div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center">
                    <strong>B</strong><strong class="text-primary">D</strong></a></div>
        </div>
        <div class="main-menu">
            <h5 class="sidenav-heading">Main</h5>
            <ul id="side-main-menu" class="side-menu list-unstyled">
                <li><a href="/manager/page/index"> <i class="icon-home"></i>Home </a></li>
                <li><a href="/manager/page/article"> <i class="icon-form"></i>Article </a></li>
                <li><a href="/manager/page/category"> <i class="fa fa-book"></i>category </a></li>
                <li><a href="/manager/page/write"> <i class="fa fa-book"></i>Write </a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="page">
    <header class="header">
        <nav class="navbar">
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i
                                    class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
                            <div class="brand-text d-none d-md-inline-block"><span>Bootstrap </span><strong
                                        class="text-primary">Dashboard</strong></div>
                        </a></div>
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                        <li class="nav-item"><a href="/manager/user/out" class="nav-link logout"> <span
                                        class="d-none d-sm-inline-block">Logout</span><i
                                        class="fa fa-sign-out"></i></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <section>
        <div class="container-fluid">
            <!-- Page Header-->
            <header>
                <h1 class="h3 display">Tables </h1>
            </header>
            <div class="row">
                <div class="col-lg-2">
                    <button class="btn btn-info" onclick="edit_new()">新增</button>
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4>Article Table</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>title</th>
                                        <th>create time</th>
                                        <th>is delete</th>
                                        <th>operation</th>
                                    </tr>
                                    </thead>
                                    <tbody id="article_table">
                                    <tr>
                                        <td>{{item.id}}</td>
                                        <td>{{item.title}}</td>
                                        <td>{{item.create_time}}</td>
                                        <td>{{item.is_delete}}</td>
                                        <td>
                                            <button class="btn btn-primary" onclick="edit({{item.id}})">edit</button>
                                            <button class="btn btn-warning" onclick="deleteit({{item.id}})">delete
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script>
    let article_table = new Render("#article_table");

    function init() {
        $.ajax({
            url: "/manager/get/article",
            type: "GET",
            success: function (e) {
                article_table.for(e);
            }
        });
    }

    function go(url) {
        location.href = url;
    }

    function edit(id) {
        window.open("/manager/page/write?id=" + id, "_blank");
    }

    function edit_new() {
        window.open("/manager/page/write", "_blank");
    }

    function deleteit(id) {
        $.ajax({
            url: "/manager/delete/article",
            type: "DELETE",
            dataType: "json",
            data: JSON.stringify({id}),
            success: function (e) {
                if(e){
                    location.reload()
                }
            }
        })
    }

    init();
</script>
</body>
</html>